<template>
  <div class="swiper">
    <van-swipe class="my-swipe"  @change="onChange" height='250'>
      <van-swipe-item v-for="(item,index) in dataDetail.usedCarPicCs_01" :key="index">
        <img v-show="!!item.picUrl"  v-lazy="item.picUrl" loading style="object-fit: cover;">
        <van-loading v-show="!(!!item.picUrl)"/>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{dataDetail.usedCarPicCs_01.length}}</div>
      </template>
    </van-swipe>
    <!-- 已售出 -->
    <div class="info_box" v-if="sale">
      <div class="swiper_info">
        <div class="info_1">
          <div>已售</div>
        </div>
        <div class="info_2">
          <div @click="shake">
            <van-icon name="star-o" />
            <p>收藏</p>
          </div>
          <div @click="showShare = true">
            <van-icon name="share-o" />
            <p>分享</p>
          </div>
        </div>
      </div>
      <div class="car_type">{{dataDetail.vtdName}}</div>
    </div>
    <!-- 未售出 -->
    <div class="info_box" v-else>
      <div class="swiper_info">
        <div class="info_3">
          <span>{{dataDetail.price/10000}}</span><span>万</span>
        </div>
        <div class="info_2">
          <div>
            <div v-show="!star">
              <van-icon name="star-o" @click="shake"/>
              <p>收藏</p>
            </div>
            <div v-show="star">
              <van-icon v-show="star" color="#FF571A" name="star" @click="shake" />
              <p>已收藏</p>
            </div>
          </div>
          <div>
            <van-icon name="share-o" @click="showShare = true"/>
            <p>分享</p>
          </div>
        </div>
      </div>
      <div class="guide_price">
        <span>新车指导价：{{dataDetail.guidingPrice/10000}}万</span> <span>省{{(dataDetail.guidingPrice-dataDetail.price)/10000}}万</span>
      </div>
      <div class="car_type">{{dataDetail.vtdName}}</div>
    </div>
    <!-- 图片数量 -->
    <!-- <div class="allPicture" @click="goPicture">
      <van-icon name="photo" />
      <span>共{{dataDetail.usedCarPicCs.length}}张照片></span>
    </div> -->
    <!-- 分享弹窗 -->
    <div class="share">
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataDetail: {
      type: Object,
    },
    star: {
      type: Boolean
    }
  },
  data() {
    return {
      current: 0,
      show: true,
      sale: false, // 是否已售出
      img: 'https://img01.yzcdn.cn/vant/cat.jpeg', // 图片地址
      options: [
        { name: '微信', icon: 'wechat', type: 1 },
        { name: '朋友圈', icon: 'wechat-moments', type: 2 }
      ],
      showShare: false, // 打开分享弹框
      timeOut: ''
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    // 查看全部照片
    goPicture() {
      this.$router.push({
        name: 'photoDetail',
        query:{
          data: this.dataDetail.usedCarPicCs
        }
      })
    },
    // 询底价
    price() {
      this.$emit('func',this.show)
    },
    // 收藏防抖
    shake() {
      const nowTime = new Date().getTime()
      this.timeOut = setTimeout(() => {
        // console.log(nowTime, new Date().getTime())
        if(new Date().getTime() - nowTime >= 250) {
          console.log('111')
          this.collect()
        }
      }, 250);
    },
    // 收藏
    collect() {
      // console.log('children, 收藏')
      this.$emit('func')
      clearTimeout(this.timeOut)
    },
    // 分享
    footprint() {
      console.log('分享')
    },
    // 获取详情数据
    getData() {
      let dataDetail = this.dataDetail
      this.sale = (dataDetail.type === '00' || dataDetail.type === '02') ? false : true
    },
    // 点击分享
    onSelect(e) {
      // console.log(e)
      // 截取掉token
      let url = window.location.href
      if(url.indexOf('?') > 0) {
        let url1 = window.location.href.split('?')
        let url2 = url[1].split('&')
        url = url1[0]+'?'+url2[1]
      }
      uni.postMessage({
        data: {
          type: e.type,
          title: this.dataDetail.vtdName,
          _imageUrl: this.dataDetail.usedCarPicCs[0].picUrl,
          shareUrl: url,
          share: 1
        }
      })
    },
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped lang="less">
.custom-indicator{
  position: absolute;
  top: 220px;
  left: 16px;
  color: #666;
}
.swiper{
  position: relative;
  .allPicture{
    position: absolute;
    top: 208px;
    right: 16px;
    background-color: rgba(255,255,255,.8);
    padding: 5px 10px;
    border-radius: 50px;
    color: #666;
  }
  .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 250px;
      text-align: center;
      background-color: #F8F8F8;
      img{
        width: 100%;
        height: 100%;
      }
  }
  .info_box{
    margin: 16px;
    .swiper_info{
      display: flex;
      align-items: center;
      .info_1{
        flex: 4;
        font-size: 25px;
        font-weight: 600;
        color: #666;
        margin-bottom: 5px;
      }
      .info_2{
        flex: 2;
        font-size: 10px;
        text-align: center;
        display: flex;
        color: #666;
        div{
          flex: 1;
        }
        .van-icon{
          font-size: 20px;
        }
        img{
          width: 20px;
          height: 20px;
        }
      }
      .info_3{
        flex: 4;
        font-size: 25px;
        font-weight: 600;
        color: #FF571A;
        margin-bottom: 5px;
        span:nth-child(2){
          font-size: 14px;
        }
      }
    }
    .guide_price{
      font-size: 14px;
      padding-bottom: 5px;
      color: #999;
      span:nth-child(2) {
        margin-left: 10px;
        color: #FF571A;
      }
    }
    .car_type{
      font-size: 16px;
      font-weight: 550;
    }
  }
}
</style>